// 聊天记录 四级路由
import { useEffect, useRef } from "react";
import { ProTable } from "@ant-design/pro-components";
import crCss from "./ChatRecords.module.css";
import request from "../../../../../http/request";
import { useDispatch, useSelector } from "react-redux";
import { cListSet, searchSet } from '../../../../../store/reducer/chatRecords';

export default () => {
  // const [list, setList] = useState([]);
  // console.log(list);
  const dis = useDispatch()
  useEffect(() => {
    request.get("/api/chatrecords").then((res) => {
      console.log(res.list);
      // setList(res.list);
      dis(cListSet(res.list));
    });
  }, []);
  const list = useSelector((state) => {
    return state.chatRecords.cList
  })
  console.log(list);

  // 搜索
  const ref = useRef()
  const search = () => {
    console.log(ref.current.value);
    dis(searchSet(ref.current.value));
  }
  //   const valueEnum = {
  //     0: "close",
  //     1: "online",
  //   };

  const tableListDataSource = [];

  list.forEach((item, index) => {
    for (let i = 1; i < 3; i += 1) {
      return tableListDataSource.push({
        key: item.key,
        name: item.name,
        // img: item.img,
        // img: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
        // status: valueEnum[item.status],
        msg: item.msg,
        jsname: item.jsname,
        time: item.time,
      });
    }
  });

  const columns = [
    {
      title: "ID",
      width: 80,
      dataIndex: "key3",
      render: (_) => <a>{_}</a>,
    },
    {
      title: "发送人",
      width: 80,
      dataIndex: "name",
      render: (_) => <a>{_}</a>,
    },
    {
      title: "消息",
      width: 80,
      dataIndex: "msg",
      render: (_) => <a>{_}</a>,
    },
    {
      title: "接收人",
      width: 80,
      dataIndex: "jsname",
      render: (_) => <a>{_}</a>,
    },
    {
      title: "创建时间",
      width: 140,
      dataIndex: "time",
      render: (_) => <a>{_}</a>,
    },
  ];

  return (
    <div>
      <div className={crCss.box}>
        <h2 className={crCss.h2}>搜索信息</h2>
        <div className={crCss.top}>
          <span
            style={{
              width: "150px",
              height: "50px",
              fontSize: "30px",
              lineHeight: "50px",
              background: "#eee",
              textAlign: "center",
            }}
          >
            接待客服
          </span>
          <input ref={ref} style={{ width: "150px", height: "50px", fontSize: "22px" }} />
          <button
            onClick={search}
            style={{
              background: "#acd",
              border: "none",
              width: "100px",
              fontSize: "20px",
            }}
          >
            搜索
          </button>
        </div>
      </div>
      <ProTable
        dataSource={tableListDataSource}
        rowKey="key"
        pagination={{
          showQuickJumper: true,
        }}
        columns={columns}
        search={false}
        dateFormatter="string"
      />
    </div>
  );
};
